<template>
    <div>
        <el-card shadow="hover">
            <div slot="header" class="clearfix">
                <h1 class="title">FunCode在线比赛</h1>
            </div>
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column label="比赛名称" width="180">
                    <template slot-scope="scope">
                        <el-link @click="toCompetitionItem(scope.row.id)">{{ scope.row.date }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="比赛时间" width="180">
                </el-table-column>
                <el-table-column prop="name" label="比赛时长" width="180">
                </el-table-column>
                <el-table-column prop="address" label="题数">
                </el-table-column>
                <el-table-column prop="address" label="参赛人数">
                </el-table-column>
                <el-table-column prop="name" label="状态" width="100">
                </el-table-column>
            </el-table>
            <div class="pagnation">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                    :current-page.sync="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>
  
<script>
export default {
    name: "competition",
    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            form: {}
        }
    },
    methods: {
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            toCompetitionItem(id) {
                this.$router.push("/competition/" + id)
            }
        },
    },
}
</script>
<style scoped>
.clearfix {
    text-align: center;
}

.title {
    font-family: "HarmonyOS_Sans_Regular";
}

.pagnation {
    margin-top: 20px;
    text-align: center;
}
</style>